<template>
  <k-dialog title="标题" width="30%" v-bind="formModalState" v-on="formModalEvent">
    <k-form v-if="state.visible" ref="formRef" :model="state.model" :rules="state.rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="state.model.name" clearable placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="管理员" prop="admin">
        <el-switch v-model="state.model.is_admin" />
      </el-form-item>
      <el-form-item label="是否禁用" prop="is_frozen">
        <el-switch v-model="state.model.is_frozen" />
      </el-form-item>
    </k-form>
  </k-dialog>
  <!-- drawer -->
  <!-- <k-form-modal
    v-model="state.visible"
    drawer
    :loading="state.loading"
    title="标题"
    :model="state.model"
    :rules="state.rules"
    @submit="methods.onSubmit"
    @cancel="methods.onCancel"
  >
    <el-form-item label="姓名" prop="name" style="width: 50%">
      <el-input v-model="state.model.name" clearable placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="管理员" prop="admin" class="k-form-item__12">
      <el-switch v-model="state.model.is_admin" />
    </el-form-item>
    <el-form-item label="是否禁用" prop="is_frozen">
      <el-switch v-model="state.model.is_frozen" />
    </el-form-item>
  </k-form-modal> -->
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useFormModal } from '@crud/index';
defineOptions({ name: 'DemoListEditModal' });

const formRef = ref();

const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef: formRef,
  model: {
    name: '',
    is_admin: false,
    is_frozen: false
  },
  rules: {
    name: [{ required: true, message: '不能为空' }]
  },
  getParams: (model: any) => model,
  onShow: (mode = 0, data: any) => {
    if (mode === 0) {
      methods.resetModel();
    } else if (data) {
      state.model = {
        user_id: data.user_id,
        name: data.name,
        is_admin: data.is_admin,
        is_frozen: data.is_frozen
      };
    }
  },
  onSubmit: (model: any, mode = 0) => {
    if (mode === 0) {
      console.log('useFormModal onSubmit add', model);
    } else if (mode === 1) {
      console.log('useFormModal onSubmit edit', model);
    }
  }
});

defineExpose({
  show: methods.show
});
</script>
